<template>
  <div class="key-personnel">
    <div class="module-title">重点人员</div>
    <div class="list-container">
      <div class="list-header">
        <div class="header-cell">姓名</div>
        <div class="header-cell">班级</div>
        <div class="header-cell">组别</div>
        <div class="header-cell">原因</div>
        <div class="header-cell">分数</div>
        <div class="header-cell">预警等级</div>
      </div>
      <div class="list-body">
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>
        <div v-else-if="keyPersonnel.length === 0" class="no-data">
          暂无重点人员数据
        </div>
        <div v-else v-for="(person, index) in keyPersonnel" :key="index" class="list-row">
          <div class="list-cell">{{ person.name }}</div>
          <div class="list-cell">{{ person.classes }}</div>
          <div class="list-cell">{{ person.groupName }}</div>
          <div class="list-cell">{{ person.keyReason }}</div>
          <div class="list-cell">{{ person.score }}</div>
          <div class="list-cell" :class="getWarningLevelClass(person.warningLevel)">
            <span class="status-indicator"></span>
            {{ person.warningLevel }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KeyPersonnel',
  data() {
    return {
      keyPersonnel: [],
      loading: true
    };
  },
  created() {
    console.log('KeyPersonnel组件创建');
  },
  mounted() {
    console.log('KeyPersonnel组件挂载');
    this.loadKeyPersonnel();
  },
  watch: {
    '$route': {
      immediate: true,
      handler(to, from) {
        console.log('路由变化，从', from?.path, '到', to.path);
        if (to.name === 'key-personnel') {
          this.loadKeyPersonnel();
        }
      }
    }
  },
  methods: {
    async loadKeyPersonnel() {
      console.log('开始加载重点人员数据');
      this.loading = true;
      try {
        if (!this.$displayapi) {
          console.error('displayapi 未定义');
          throw new Error('API 未正确初始化');
        }
        const response = await this.$displayapi.getKeyPerson();
        console.log('重点人员数据响应:', response);
        if (response && response.code === "200" && Array.isArray(response.data)) {
          this.keyPersonnel = response.data.map(item => ({
            name: item.name || '',
            classes: item.classes || '',
            groupName: item.groupName || '',
            keyReason: item.keyReason || '',
            score: item.score || '',
            warningLevel: item.warningLevel || ''
          }));
        } else {
          console.warn('重点人员数据格式不正确:', response);
          this.keyPersonnel = [];
        }
      } catch (error) {
        console.error('获取重点人员数据失败:', error);
        this.keyPersonnel = [];
      } finally {
        this.loading = false;
      }
    },
    getWarningLevelClass(level) {
      switch (level) {
        case '高风险':
          return 'status-high';
        case '中风险':
          return 'status-medium';
        case '低风险':
          return 'status-low';
        default:
          return '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.key-personnel {
  width: 98%;
  height: 96%;
  display: flex;
  flex-direction: column;

  .module-title {
    font-size: 22px;
    color: #68d8fe;
    margin-bottom: 15px;
    margin-left: 20px;
    margin-top: 10px;
    padding-left: 5px;
    font-weight: bold;
    position: relative;
    z-index: 1;
  }

  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .list-header {
      display: flex;
      background-color: rgba(104, 216, 254, 0.1);
      border-bottom: 1px solid rgba(104, 216, 254, 0.5);

      .header-cell {
        flex: 1;
        padding: 10px;
        text-align: center;
        color: #68d8fe;
        font-weight: bold;
        font-size: 18px;
      }
    }

    .list-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(19, 25, 47, 0.5);
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(104, 216, 254, 0.5);
        border-radius: 3px;
      }

      .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;

        .loading-spinner {
          width: 40px;
          height: 40px;
          border: 3px solid rgba(104, 216, 254, 0.3);
          border-radius: 50%;
          border-top-color: #68d8fe;
          animation: spin 1s linear infinite;
          margin-bottom: 10px;
        }

        p {
          color: #d3d6dd;
        }

        @keyframes spin {
          to { transform: rotate(360deg); }
        }
      }

      .no-data {
        text-align: center;
        padding: 20px;
        color: #909399;
        font-style: italic;
      }

      .list-row {
        display: flex;
        border-bottom: 1px solid rgba(104, 216, 254, 0.1);

        &:hover {
          background-color: rgba(104, 216, 254, 0.05);
        }

        .list-cell {
          flex: 1;
          padding: 10px;
          text-align: center;
          color: #d3d6dd;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;

          &.status-high {
            color: #ff6e76;

            .status-indicator {
              background-color: #ff6e76;
            }
          }

          &.status-medium {
            color: #fddd60;

            .status-indicator {
              background-color: #fddd60;
            }
          }

          &.status-low {
            color: #7cffb2;

            .status-indicator {
              background-color: #7cffb2;
            }
          }

          .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
